<template>
  <div class="energy-line-bar">
    <div class="energy-line-bar-main">
      <dv-charts :option="lineBarConfig" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'EnergyMiddleZhuBarCmp',
  props:["title"],
  data () {
    return {
      pathPng: require("../../assets/path.png"),
      lineBarConfig:  {
        grid: {
          top: '0px',
          // bottom: '0px',
          left: '10px',
          right: '10px',
          containLabel: true,
        },
        title: {
          text: '周销售额趋势'
        },
        xAxis: {
          name: '',
          data: ['01月', '02月', '03月', '04月', '05月', '06月', '07月', '08月', '09月', '10月', '11月', '12月'],
          axisLabel: {
            style: {
              fill: '#FFF',
              fontSize: 12,
              rotate: 0
            }
          }
        },
        yAxis: {
          name: '',
          data: 'value',
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          splitLine: {
            style: {
              stroke: '#182A41',
              lineWidth: 1
            }
          },
          min: 0,
          max: 1200,
          interval: 200,
        },
        series: [
          {
            data: [1200, 1100, 1000, 900, 1000, 1100, 1150, 1100,1150,1130,1080,1150],
            type: 'bar',
            stack: 'a',
            barWidth: "30%",
          },
          {
            data: [100, 200, 50, 100, 150, 50, 100,50,80,60,100,90],
            type: 'bar',
            gradient: {
              color: ['#FFB300', '#FFB300']
            },
          }
        ]
      }
      
    }
  }
}
</script>

<style lang="scss" scoped>
.energy-line-bar {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  // background: rgba(15,47,92,0.2);

  .energy-line-bar-main {
    width: 100%;
    height: 100%;
  }
}
</style>
